<script setup lang="ts">
  import Customnavbar from './conpent/Customnavbar.vue'
  import Swper from './conpent/Swper.vue'
  import CategoryPanel from './conpent/CategoryPanel.vue'
  import Guess from './conpent/Guess.vue'
  import HotPanel from './conpent/HotPanel.vue'
  import type { BannerItem,CategoryItem,HotItem } from '@/types/home'
  import {getHomeBannerAPI,getHomeCategoryAPI,getHomeHotAPI,getHomeGoodsGuessLikeAPI} from '@/services/home.ts'
  import {onMounted,ref} from 'vue'
import type { XtxGuessInstance } from '@/types/component'
  const BannerList=ref<BannerItem[]>([])
  const CategoryList=ref<CategoryItem[]>([])
  const HotPanelList=ref<HotItem[]>([])
 const GetBannerList=async()=>{
   const res=await getHomeBannerAPI()
      BannerList.value=res.result
 }
const GetCategoryList=async()=>{
   const res=await getHomeCategoryAPI()
      CategoryList.value=res.result
 }
 const GetHotPanelList=async()=>{
    const res=await getHomeHotAPI()
       HotPanelList.value=res.result
  }
  // 获取猜你喜欢组件实例
  const guessRef = ref<XtxGuessInstance>()

  // 滚动触底事件
  const onScrolltolower = () => {
    console.log( guessRef.value)
    // guessRef.value?.getMore()
  }
  // 下拉刷新状态
  const isTriggered = ref(false)
  // 自定义下拉刷新被触发
  const onRefresherrefresh = async () => {
    // 开启动画
    isTriggered.value = true
    // 重置猜你喜欢组件数据
    guessRef.value?.resetData() // 加载数据
    await Promise.all([getHomeBannerAPI(), getHomeCategoryAPI(), getHomeHotAPI()]) // 关闭动画
    isTriggered.value = false
  }
  onMounted(async()=>{
        GetBannerList()
        GetCategoryList()
        GetHotPanelList()
        onScrolltolower()
    })

//
</script>

<template>
 <Customnavbar :list="BannerList"></Customnavbar>
 <Swper></Swper>
 <CategoryPanel :list="CategoryList"></CategoryPanel>
 <HotPanel :list="HotPanelList"></HotPanel>
 <!-- 滚动容器 -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    class="scroll-view"
    scroll-y
  >
     <!-- 猜你喜欢 -->
     <Guess ref="guessRef" />
   </scroll-view>
</template>

<style lang="scss">
//
</style>
